<template>
  <a-card class="body-container">
    <s-list-form :enable-more="false" @change="
      $nextTick(() => {
        $calcTableHeight()
      })
      ">
      <template #less>
        <s-form-item label="名称" size="list-middle" name="fileName" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入文件名称" v-model="query.fileName" />
        </s-form-item>
        <s-form-item label="上传时间" size="list-middle" name="uploadTime" :colon="true" :display-title="true">
          <s-date-picker :allow-clear="true" placeholder="请输入上传时间" type="date" value-format="YYYY-MM-DD" :show-time="true"
            v-model="query.uploadTime" />
        </s-form-item>
        <s-form-item label="文件类型" size="list-middle" name="fileType" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请输入文件类型" code="fileType" v-model="query.fileType" />
        </s-form-item>
        <s-tool-bar style="margin-left: 20px;">
          <template #right>
            <s-button type="primary" icon="search-outlined" v-model="query" @click="search">查询</s-button>
            <s-button style="margin-left: 8px" icon="stop-outlined" @click="resetting">重置</s-button>
          </template>
        </s-tool-bar>
      </template>
      <template #more>
        <s-form-item label="文件大小" size="list-middle" name="fileSize" :colon="true" :display-title="true"
          :rules="[{ 'max': 30, 'message': '最长为30位' }]">
          <s-input :allow-clear="true" placeholder="请输入文件大小" v-model="query.fileSize" />
        </s-form-item>
        <s-form-item label="上传人" size="list-middle" name="uploadUser" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入上传人" v-model="query.uploadUser" />
        </s-form-item>
        <s-form-item label="上传时间" size="list-middle" name="uploadTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入上传时间" v-model="query.uploadTime" />
        </s-form-item>
        <s-form-item label="更新时间" size="list-middle" name="updateTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入更新时间" v-model="query.updateTime" />
        </s-form-item>
        <s-form-item>
          <!-- <s-button type="primary" icon="search-outlined"  @click="search">查询</s-button> -->
          <!-- <s-button style="margin-left: 8px" icon="stop-outlined" @click="resetting">重置</s-button> -->
        </s-form-item>
      </template>
    </s-list-form>
    <div class="vido">
      <div class="vidoInfo" v-for="filePath in fileList" :key="filePath">
        <div class="vidoInfo-img">
          <img v-if="filePath.fileType == 'txt'" src="@/assets/img/theme/403.png" alt="">
        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;">
          <div class="vidoInfo-name">{{ filePath.fileName }}</div>
          <div class="vidoInfo-time">时间: {{ filePath.uploadTimeReturn }}</div>
          <div class="vidoInfo-time">大小: {{ filePath.fileSize }} KB</div>
        </div>
        <div class="vidoInfo-operate">
          <!-- 查看附件 -->
          <div style="display: flex;" v-if="!downloading">
            <!-- @click="handleDownload(item)" -->
            <!-- 下载 -->
            <!-- <a :id="'dynamic-link' + fileList.id + filePath" target="_blank" href="#"
              @click="handleDownload(filePath, fileList.id)"> -->
            <div class="icon-xiazai1" @click="handleDownload(filePath)"></div>
            <!-- </a> -->
            <a-popconfirm title="确认删除" ok-text="Yes" cancel-text="No" @confirm="confirm(filePath)" @cancel="cancel">
              <div class="icon-shanchu1">
              </div>
              <div></div>
            </a-popconfirm>
          </div>
          <div v-else>
            <a-progress :percent="downloadPercent" size="small" :status="progressStatus"
              v-if="downloadPercent !== null" />
          </div>
        </div>
      </div>
      <div class="vidoInfoA" @click="showDrawer">
        <div class="icon-iconmobanfuzhi"></div>
        <div>点击上传</div>
      </div>
    </div>
    <div class="fenY">
      <a-pagination :current="currentPage" :total="totalItems" :page-size="pageSize"
        @change="handlePageChange"></a-pagination>
    </div>
    <!-- 抽屉 -->
    <a-drawer title="资料上传" placement="right" :closable="false" :visible="visible" :destroyOnClose="true"
      :after-visible-change="afterVisibleChange" @close="onClose" :width="400" :body-style="{ paddingBottom: '80px' }">
      <a-form-item label="名称: " name="name">
        <a-input class="custom-input" v-model:value="uploadFileName"></a-input>
      </a-form-item>
      <a-form-item label="附件: " name="name">
        <a-upload name="file" :action="fullUrl" :headers="headers" @success="handleSuccess" :before-upload="beforeUpload">
          <a-button>
            <upload-outlined></upload-outlined>
            点击上传文件
          </a-button>
        </a-upload>
        <!-- <div style="color:#D9001B">支持word、excel、pdf等格式</div> -->
      </a-form-item>
      <div>
        <a-button class="quXiao" @click="clear">取消</a-button>
        <a-button type="primary" @click="uploadFiles">上传</a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>
import { UploadOutlined } from '@ant-design/icons-vue';
import { errorMonitor } from 'events';
import { message } from 'ant-design-vue';

const BASIC_URL = import.meta.env.VITE_API_PATH;
export default {
  name: 'QueryList',
  components: { UploadOutlined },
  data() {
    return {
      BASIC_URL,
      query: {},
      fileList: [],
      visible: false,
      uploadFile: {},
      uploadFileName: '',
      currentPage: 1, // 当前页码
      totalItems: 0, // 数据总数
      pageSize: 8, // 每页显示的数据条数
      downloading: false, // 是否正在下载
      downloadProgress: 0, // 下载进度
      progressStatus: '', // 进度条状态，可选值有 'normal', 'exception', 'active', 'success'
    }
  },
  authorize: '/modules/doorPersonalFile/permissionList',
  computed: {
    fullUrl() {
      return `${this.BASIC_URL}/file/uploadDetail`;
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.searchFor();
      this.fetchData();
    },
    // handleSuccess(res) {
    //   // 处理上传成功后的逻辑
    //   this.uploadFile = res.data;
    //   this.uploadFileName = res.data.fileName;
    // },
    // 抽屉
    afterVisibleChange() {
      // console.log('visible');
    },
    onClose() {
      this.visible = false;
    },
    showDrawer() {
      this.visible = true;
    },
    // 上传文件
    beforeUpload(file) {
      // 执行文件上传前的逻辑，例如校验文件类型、大小等
      console.log('文件上传前', file);
    },
    handleSuccess(res) {
      // 处理上传成功后的逻辑
      this.uploadFile = res.data
    },
    // 取消按钮
    clear() {
      const params = {
        fileType: this.uploadFile.fileType,
        fileId: this.uploadFile.fileId
      }
      if (this.uploadFile.fileType && this.uploadFile.fileId) {
        this.$api.GET('/file/delete', params).then(res => {
          console.log('个人网盘取消按钮', res);
          this.visible = false;
          this.uploadFile.fileName = ''
        })
      } else {
        this.visible = false;
      }
    },
    // 新增
    uploadFiles() {
      const jsonString = {
        fileId: this.uploadFile.fileId,
        fileName: this.uploadFileName, //文件名称
        fileSize: this.uploadFile.fileSize, //文件大小
        filePath: this.uploadFile.filePath, //文件地址
        uploadTime: this.uploadFile.uploadTime, //上传时间
        fileType: this.uploadFile.fileType //文件类型
      }
      if (this.uploadFile.fileId && this.uploadFile.fileName) {
        this.$api.PUT('/modules/doorPersonalFile/insert', jsonString, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          this.visible = false;
          this.searchFor()
          this.uploadFile = {};
          this.uploadFileName = '';
        })
      } else {
        message.error('请上传文件');
      }
    },
    // 删除
    confirm(filePath) {
      console.log(filePath);
      const param = {
        fileType: filePath.fileType,
        fileId: filePath.id,
      }
      this.$api.DELETE('/modules/doorPersonalFile/delete', { id: filePath.id }).then(res => {
        // debugger
        this.searchFor()
        this.clear()
      })
      this.$api.GET('/file/delete', param).then(res => {
        this.search()
      })
    },
    // 下载
    handleDownload(filePath) {
      const param = {
        fileType: filePath.fileType,
        fileId: filePath.id,
      }
      this.$api.GET('/down/statics/getFile', param).then(res => {
        // 创建一个下载链接
        const link = document.createElement('a');
        link.href = BASIC_URL + '/file/downLoad/' + filePath.filePath;
        link.download = filePath.filePath;

        // 将链接添加到页面中并触发点击事件
        document.body.appendChild(link);
        link.click();
        // 清理链接对象
        document.body.removeChild(link);
      })
    },
    // 查询页面
    searchFor() {
      let query = this.query;
      this.$api.GET('/modules/doorPersonalFile/pageList', query).then(res => {
        this.fileList = res.data
      })
    },
    // 搜索按钮
    search() {
      this.fetchData()
    },
    // 分页
    fetchData() {
      const params = {
        page: this.currentPage,
        rows: this.pageSize,
        fileName: this.query.fileName
      }
      console.log(params);
      this.$api.GET('/modules/doorPersonalFile/pageList', params).then(res => {
        console.log('分页', res.data);
        this.fileList = res.data; // 更新数据源
        this.totalItems = res.count; // 更新数据总数
      })
    },
    handlePageChange(page) {
      this.currentPage = page; // 更新当前页码
      this.fetchData(); // 重新获取数据
    },
    // 重置
    resetting() {
      this.query = {}
      this.fetchData()
    }

  }
}
</script>

<style lang="less" scoped>
.body-container {
  background-color: #F2F7FB;
}

.quXiao {
  margin: 0 30px;
}

.custom-input {
  width: 180px;
}

::v-deep(.ant-progress-text) {
  color: #fff !important;
}

::v-deep(.ant-progress-show-info .ant-progress-outer) {
  width: 150px;
  padding-left: 30px;
  display: flex;
  justify-content: center;

}

::v-deep(.ant-progress-status-exception .ant-progress-bg) {
  color: #ccc9c9 !important;
}

.vidoInfoA {
  padding: 10px 20px;
  width: 365px;
  height: 125px;
  // margin-right: 30px;
  margin-bottom: 50px;
  // background-color: #0130BA;
  background-color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  div:nth-child(2) {
    padding-top: 15px;
    color: #ccc9c9;
  }
}

.vido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .vidoInfo {
    padding: 10px 20px;
    width: 355px;
    height: 125px;
    margin-right: 30px;
    margin-bottom: 50px;
    border-radius: 10px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }

  .vidoInfo-name {
    font-size: 16px;
    width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vidoInfo-img {
    padding: 10px 0;
    height: 100px;
    width: 100px;

    img {
      width: 80px;
      height: 80px;
    }
  }

  .vidoInfo-time {
    color: #c4bfbf;
  }

  .vidoInfo-operate {
    display: flex;
    align-items: flex-end;

    div:nth-child(1) {
      color: #108EE9;
    }

    div:nth-child(2) {
      color: #f8521f;
    }
  }
}

.fenY {
  text-align: center;
  padding-bottom: 30px;

  ::v-deep(.ant-pagination-prev) {
    // background-color: #0A47C8;
    border: none;
    color: #fcf8f8;
    border-radius: 10px;
    width: 60px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep(.ant-pagination-next) {
    // background-color: #0A47C8;
    border: none;
    color: #fcf8f8;
    border-radius: 10px;
    width: 60px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep(.ant-pagination-item-link) {
    background-color: #FFFFFF;
    border: none;
    color: #000;
    border-radius: 10px;
    width: 60px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep(.ant-pagination-item) {
    // background-color: #0A47C8;
    border: none;
    border-radius: 10px;
    width: 60px;
    height: 50px;
    line-height: 50px;
  }


  ::v-deep(.ant-pagination-item a) {
    color: #080808
  }

  ::v-deep(.ant-pagination-item-active) {
    background-color: #0A47C8;
  }
}
</style>